<style scoped>
.storeInventoryQuery {
  margin-right: 15px;
  padding: 0 15px;
  background-color: white;
  height: 94.5vh;
  position: relative;
}
.siq-top {
  padding: 15px 0;
  border-bottom: 2px solid #f4f4f4;
}
.siq-top div {
  display: flex;
}
.siq-top p:first-child {
  margin: 3px 6px 0 0;
  display: inline-block;
  /* width: 70px; */
  white-space: nowrap;
  /* text-align: end; */
}
.siq-top p:not(:first-child) {
  margin: 3px 6px 0 12px;
  display: inline-block;
  white-space: nowrap;
}
.wd {
  width: 160px;
}
.tip {
  border: 1px;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  margin: 6px 5px 0 5px;
}
.tip1 {
  border: 1px;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  margin: 6px 1px 0 4px;
}
.siq-btn {
  padding: 15px 15px;
  display: flex;
  justify-content: space-between;
}
.siq-btn > div {
  display: flex;
}
.siq-tab {
  display: flex;
}
.tab-left {
  width: 35%;
  padding-right: 5px;
  border-right: 2px solid #f4f4f4;
}
.tab-right {
  width: 65%;
  padding-left: 5px;
}
.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}
.footView span i {
  margin-right: 5px;
}
</style>

<style>
.storeInventoryQuery .siq-top .el-input__inner {
  height: 30px;
}
.storeInventoryQuery .siq-top .el-date-editor .el-range__icon {
  line-height: 23px;
}
.storeInventoryQuery .siq-top .el-date-editor .el-range-separator {
  width: 8%;
  line-height: 23px;
}

.storeInventoryQuery
  .siq-tab
  .el-pagination
  .el-select
  .el-input
  .el-input__inner {
  width: 100px;
  height: 30px;
}
.storeInventoryQuery .siq-tab .el-pagination--small .el-pagination__editor,
.el-pagination--small .el-pagination__editor.el-input .el-input__inner {
  width: 50px;
  height: 30px;
  margin-right: 5px;
}
.storeInventoryQuery
  .siq-tab
  .el-pagination.is-background.el-pagination--small
  .btn-next,
.el-pagination.is-background.el-pagination--small .btn-prev,
.el-pagination.is-background.el-pagination--small .el-pager li {
  height: 30px;
  width: 30px;
}
.storeInventoryQuery .siq-tab .el-pagination--small button,
.el-pagination--small span:not([class*='suffix']) {
  margin-right: 10px;
}
.storeInventoryQuery .siq-tab .el-pagination {
  float: right;
}
</style>

<template>
  <div class="storeInventoryQuery">
    <div class="siq-top">
      <div>
        <!-- <p>店铺编号</p>
        <el-input disabled class="wd" v-model="customerNo"></el-input> -->
        <p>客户编号</p>
        <el-select
          :disabled="jxStore"
          filterable
          class="update-el-select"
          style="width: 160px"
          v-model="customerNo"
          placeholder="请选择"
        >
          <el-option
            v-for="item in customerList"
            :key="item.value + Math.random()"
            :label="item.value + '  ' + item.value1"
            :value="item.value"
          ></el-option>
        </el-select>

        <p>单号</p>
        <el-input class="wd" v-model="receiptsNumber"></el-input>

        <p>款号</p>
        <!-- <el-select class="wd"> -->
        <el-input class="wd" v-model="kindsNumber"></el-input>
        <!-- <el-option
            v-for="item in warehouseNoList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select> -->

        <p>品牌</p>
        <el-select
          class="wd update-el-select"
          v-model="brandName"
          clearable
          filterable
        >
          <el-option
            v-for="item in brandedList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <p>类别</p>
        <el-select class="wd update-el-select" v-model="type" @change="Change">
          <el-option
            v-for="item in NList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <p>盘点日期</p>
        <el-date-picker
          class="update-el-datetimerange"
          unlink-panels
          v-model="timeDate"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
    </div>

    <div class="siq-btn">
      <div>
        <el-button @click="Search" type="primary" icon="el-icon-search"
          >查询</el-button
        >
        <template v-if="isZhiy === '直营'">
          <el-button
            @click="Save"
            icon="el-icon-box"
            :disabled="Dis || isRegular"
            >盘存</el-button
          >
          <el-button
            :disabled="Dis1 || isRegular"
            @click="confirm"
            icon="el-icon-circle-check"
            >确认</el-button
          >
          <el-button
            :disabled="Dis1 || isRegular"
            @click="Del"
            icon="el-icon-delete"
            >删除</el-button
          >
          <el-button @click="outputDetail" icon="el-icon-download"
            >导出</el-button
          >
        </template>
      </div>
      <div>
        <div class="tip" style="background: #6bcc7b"></div>
        :已完成
        <!-- <div class="tip" style="background:#FBCA4D;"></div>:未收货 -->
        <div class="tip" style="background: #ff0000"></div>
        <p style="margin-right: 15px">:未确认</p>
      </div>
    </div>

    <div class="siq-tab">
      <div class="tab-left">
        <el-table
          border
          id="tip1"
          show-summary
          :data="aList"
          height="69vh"
          style="width: 100%"
          highlight-current-row
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          @row-click="rowClick"
          :cell-style="{ padding: 0, height: '26px' }"
        >
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column
            label="单据状态"
            width="85"
            v-if="this.type == '核存' ? false : true"
          >
            <template slot-scope="scope">
              <div style="display: flex; text-align: center">
                <div
                  class="tip1"
                  :style="{
                    background: scope.row.affirm == 0 ? '#FF0000' : '#6BCC7B'
                  }"
                ></div>
                <p>{{ scope.row.affirm == 0 ? '未确认' : '已完成' }}</p>
              </div>
            </template>
          </el-table-column>
          <template v-for="i in bList">
            <el-table-column
              show-overflow-tooltip
              :prop="i.prop"
              :label="i.label"
              :width="i.width"
              :key="i.prop"
            >
            </el-table-column>
          </template>
        </el-table>

        <!-- :pager-count="5"  设置显示最大页码数 超过用 … 显示 -->
        <el-pagination
          small
          background
          :pager-count="Count"
          layout="prev, pager, next, jumper, sizes"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="limit"
          :page-count="pagesNum"
          :total="dataLen"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>

      <div class="tab-right">
        <el-table
          border
          id="tip1"
          :data="cList"
          height="69vh"
          style="width: 100%"
          highlight-current-row
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
        >
          <!-- <el-table-column
                type="index"
                label="序号"
                width="50">
              </el-table-column> -->
          <template v-for="i in eList">
            <el-table-column
              show-overflow-tooltip
              :prop="i.prop"
              :label="i.label"
              :width="i.width"
              :key="i.prop + Math.random()"
            >
            </el-table-column>
          </template>
        </el-table>
        <el-pagination
          small
          background
          :pager-count="Count"
          layout="prev, pager, next, jumper, sizes"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="limit1"
          :page-count="pagesNum1"
          :total="dataLen1"
          @current-change="handleCurrentChange1"
          @size-change="handleSizeChange1"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 分頁 -->
    <foot-view class="footView">
      <div slot="text">
        <el-popover
          placement="top-start"
          width="120"
          max-height="100px"
          trigger="click"
        >
          <i slot="reference" class="el-icon-date"> 表头配置</i>
        </el-popover>
        <span>数据库：{{ jxQuarter }}</span>
      </div>
    </foot-view>
  </div>
</template>

<script>
import footView from '../../../components/FootView'
import today from '../../../components/mixins/today'
import { getBranded } from '../../../network/branded'
import {
  getShop,
  shopQuery,
  postData,
  shopQueryOne,
  saveData,
  deleteShop,
  checkConfirm,
  getRightData
} from '../../../network/shop'
import { getClient } from '../../../network/client'

import cookieFn from '../../../components/mixins/cookieFn'

import table2excel from 'js-table2excel'

export default {
  name: 'store_take_stock_query',
  mixins: [today, cookieFn],
  created() {
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    let operatorVal = document.cookie.match(RegExp('jxAgent'+'=([^;]+)'))
    this.operatorVal = operatorVal ? operatorVal[1] : null
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
    
    // console.log(document.cookie.match(RegExp('jxDeleteCommand'+'=([^;]+)')))
    this.isZhiy = localStorage.getItem('whatState')
    //获取客户编号
    if (this.jxStore) {
      getShop().then((res) => {
        console.log(res.data)
        this.directSaleNo = res.data.data.no
      })
    } else {
    }

    this.bList = this.bList1
    this.eList = this.eList1
    // 品牌公司查品牌
    getBranded().then((res) => {
      res.data.data.forEach((e) => {
        this.brandedList.push({ value: e.name, label: e.name })
      })
    })
    //获取店铺编号
    // getShop().then(res=>{
    //   console.log(res.data)
    //   this.customerNo = `${res.data.data.headquartersNo},  ${res.data.data.name}`
    //   // console.log(this.customerNo.split(',',[1]))
    // });

    getClient().then((res) => {
      console.log(this.operator)
      console.log(res.data)
      res.data.data.forEach((e) => {
        this.customerList.push({
          value: e.no,
          label: e.name,
          value1: e.name,
          value2: e.id
        })
      })
      for (let i of this.customerList) {
        if (i.value1 == this.operator) {
          this.customerNo = i.value
          this.Dis1 = true
          break
        }
      }
    })
  },
  components: {
    footView
  },
  data() {
    return {
      // jxDeleteCommand: document.cookie.match(RegExp('jxDeleteCommand'+'=([^;]+)'))[1],
      sequence: '',
      isZhiy: '',
      isRegular: false,
      jxQuarter: null,
      // jxQuarter: document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))[1],
      allData: [],
      allData1: [],

      Count: 5, //页码设置显示最大页码数 超过用 … 显示
      // 总数据条数
      dataLen1: 0,
      // 总页码
      pagesNum1: 0,
      // 分页条数
      limit1: 20,
      // 当前页码
      currentPage1: 1,

      //数据总条数
      dataLen: 0,
      //总页码数
      pagesNum: 0,
      //每页显示条数
      limit: 20,
      // 当前页码
      currentPage: 1,
      Dis1: false,
      operator:null,
      // operator: document.cookie.match(RegExp('jxUser' + '=([^;]+)'))[1],
      jxStore: this.getCookie('jxStore') == '1',
      customerList: [],
      myDate: this.searchDateWithHour(),
      Dis: true,
      Dis1: false,
      kindsNumber: '',
      receiptsNumber: '',
      aList: [],
      cList: [],
      customerNo: '',
      timeDate: '',
      brandName: '',
      brandedList: [],
      checked: false,
      type: '盘点',
      NList: [
        { label: '盘点', value: '盘点' },
        { label: '盘差', value: '盘差' },
        { label: '核存', value: '核存' }
      ],

      bList: [],
      bList1: [
        { prop: 'sequence', label: '盘点序号', width: '140' },
        { prop: 'receiptsNumber', label: '单号', width: '120' },
        { prop: 'checkTime', label: '盘点日期', width: '110' },
        { prop: 'number', label: '盘点数量' },
        { prop: 'stockingMoney', label: '盘点金额' }
      ],
      bList2: [
        { prop: 'checkNumber', label: '盘点' },
        { prop: 'repertory', label: '客存' },
        { prop: 'differNumber', label: '盘差' }
      ],

      eList: [],
      eList1: [
        { prop: 'sequence', label: '盘点序号', width: '130' },
        { prop: 'kindsNumber', label: '货号', width: '140' },
        { prop: 'sellingPrice', label: '售价' },
        { prop: 'onePrice', label: '单价' },
        { prop: 'number', label: '盘点数量' },
        { prop: 'stockingMoney', label: '盘点金额' },
        { prop: 'checkTime', label: '盘点日期', width: '100' },
        { prop: 'quarterName', label: '季度' },
        { prop: 'operator', label: '操作员' },
        { prop: 'enteringTime', label: '录入时期', width: '100' }
      ],
      eList2: [
        { prop: 'kindsNumber', label: '货号' },
        { prop: 'checkNumber', label: '盘点' },
        { prop: 'repertory', label: '客存' },
        { prop: 'differNumber', label: '盘差' }
      ],
      currentRow: {}
    }
  },
  methods: {
    //确认
    confirm() {
      checkConfirm({ sequence: this.sequence }).then((res) => {
        if (res.data.code == 200) {
          this.currentRow.affirm = 1
          this.Dis1 = true
          this.$message.success({ message: '确认成功', offset: 400 })
        } else {
          this.$message.error({ message: '确认失败', offset: 400 })
        }
      })
    },
    //删除
    Del() {
      if (this.cList == '' || this.sequence == '') {
        this.$message.warning({ message: '请选中一条数据删除', offset: 400 })
        return
      }
      this.$router.push({
        path: '/warhous_delete',
        query: { type: 4, sequenceid: this.sequence }
      })
      this.$store.commit('addNav', {
        label: '店铺盘点查询删单',
        name: 'warhous_delete'
      })
      // let checkMap = {}
      // this.cList.forEach(e=>{
      //   checkMap[e.kindsNumber] = e.number
      // })
      // let vipWarehouseCheck = {sequence:this.sequence}
      // let obj = {vipWarehouseCheck,checkMap}
      // console.log(obj)
      // this.$confirm('是否删除选中数据 是否确认？', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     deleteShop(JSON.stringify(obj)).then(res=>{
      //       console.log(res.data)
      //       if(res.data.code == 200){
      //         this.Search()
      //         this.$message({
      //           type: 'success',
      //           message: '删除成功'
      //         });
      //         this.sequence = ''
      //       }else{
      //         this.$message.error({
      //           message: '删除失败'
      //         });
      //       }
      //     });
      //   })
    },

    outputDetail() {
      if (!this.cList.length) {
        this.$message.info('暂无数据')
        return
      }
      const column = [
        { key: 'index', title: '序号', type: 'text' },
        { key: 'sequence', title: '盘点序号', type: 'text' },
        { key: 'kindsNumber', title: '货号', type: 'text' },
        { key: 'sellingPrice', title: '售价', type: 'text' },
        { key: 'onePrice', title: '单价', type: 'text' },
        { key: 'number', title: '盘点数量', type: 'text' },
        { key: 'stockingMoney', title: '盘点金额', type: 'text' },
        { key: 'checkTime', title: '盘点日期', type: 'text' },
        { key: 'quarterName', title: '季度', type: 'text' },
        { key: 'operator', title: '操作员', type: 'text' },
        { key: 'enteringTime', title: '录入时期', type: 'text' }
      ]

      if (this.type == '核存' && this.isZhiy == '直营') {
        column = [
          { key: 'index', title: '序号', type: 'text' },
          { key: 'kindsNumber', title: '货号', type: 'text' },
          { key: 'checkNumber', title: '盘点', type: 'text' },
          { key: 'repertory', title: '客存', type: 'text' },
          { key: 'differNumber', title: '盘差', type: 'text' }
        ]
      }

      if (this.type == '盘点' || this.type == '盘差') {
        let pageData = {
          page: 1,
          limit: 9999999
        }
        getRightData(
          JSON.stringify({
            pageData,
            sequenceList: [this.sequence == null ? '' : this.sequence],
            type: 0
          })
        ).then((res) => {
          res.data.data.forEach((e, i) => {
            e.index = i + 1
            e.kindsNumber += '&nbsp;'
          })
          table2excel(column, res.data.data, '店铺盘点明细.xls')
        })
      } else {
        this.cList.forEach((e, i) => {
          e.index = i + 1
        })
        table2excel(column, this.cList, '店铺盘点.xls')
      }
    },

    handleSizeChange(val) {
      //每页多少条
      this.limit = val
      //总页码
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
      this.Search()
    },
    handleCurrentChange(val) {
      //当前页
      this.currentPage = val
      this.Search()
    },
    //右表当前页
    handleCurrentChange1(val) {
      if (this.type == '核存') {
        this.currentPage = val
        this.Search()
      } else {
        this.currentPage1 = val
        this._getRightData()
        // this.cList = this.cList.slice((this.currentPage1-1)*this.limit1,this.currentPage1*this.limit1)
      }
    },
    handleSizeChange1(val) {
      if (this.type == '核存') {
        this.limit = val
        this.pagesNum = Math.ceil(this.dataLen / this.limit)
        this.Search()
      } else {
        this.limit1 = val
        this.pagesNum1 = Math.ceil(this.dataLen1 / this.limit1)
        this._getRightData()
        // this.cList = this.cList.slice((this.currentPage1-1)*this.limit1,this.currentPage1*this.limit1)
      }
    },
    Change() {
      if (this.type == '盘点' || this.type == '盘差') {
        this.bList = this.bList1
        this.eList = this.eList1
        this.Dis = true
        this.Search()
      }
      if (this.type == '核存' && this.isZhiy == '直营') {
        this.bList = this.bList2
        this.eList = this.eList2
        this.Dis = false
        this.Search()
      }
    },
    Search() {
      this.aList = []
      this.cList = []
      this.currentRow = {}
      let pageData = {
        page: this.currentPage,
        limit: this.limit
      }
      let obj = {
        // "pageData.page":this.currentPage,
        // "pageData.limit":this.limit,
        pageData,
        brandName: this.brandName,
        customerNo: this.customerNo,
        kindsNumber: this.kindsNumber,
        receiptsNumber: this.receiptsNumber,
        type: this.type == '盘点' ? 0 : this.type == '盘差' ? 1 : 2,
        startTime:
          this.timeDate == null
            ? ''
            : this.timeDate[0] == undefined
            ? ''
            : this.timeDate[0] + 'T00:00:00',
        endTime:
          this.timeDate == null
            ? ''
            : this.timeDate[1] == undefined
            ? ''
            : this.timeDate[1] + 'T23:59:59'
      }
      console.log(obj)
      // console.log(JSON.stringify(obj).replace(/\[|]/g,''))
      if (this.type == '盘点' || this.type == '盘差') {
        shopQuery(JSON.stringify(obj).replace(/\[|]/g, '')).then((res) => {
          console.log(res.data)
          if (res.data.data != null) {
            res.data.data.sort((a, b) => {
              return a.checkTime < b.checkTime ? 1 : -1
            })
          }
          this.aList = res.data.data
          if (res.data.total != null) {
            this.dataLen = res.data.total
          } else {
            this.dataLen1 = 0
          }
        })
      }

      if (this.type == '核存') {
        shopQueryOne(JSON.stringify(obj).replace(/\[|]/g, '')).then((res) => {
          console.log(res.data)
          if (res.data.data != null) {
            this.aList = [res.data.data]
            this.cList = res.data.data.nuclearDepositList
            // console.log(this.aList)
          }
          this.dataLen = 1
          this.dataLen1 = res.data.data.total
        })
      }
    },
    _getRightData() {
      //参数
      let pageData = {
        page: this.currentPage1,
        limit: this.limit1
      }
      // console.log(JSON.stringify({pageData,sequenceList:[this.sequence],type:0}))
      getRightData(
        JSON.stringify({
          pageData,
          sequenceList: [this.sequence == null ? '' : this.sequence],
          type: 0
        })
      ).then((res) => {
        console.log(res)
        if (res.data.code == 200) {
          this.cList = res.data.data
          this.dataLen1 = res.data.total
        }
      })
    },
    rowClick(e) {
      // console.log(e)
      this.sequence = e.sequence
      this.currentRow = e
      if (e.affirm == 1) {
        this.Dis1 = true
      } else {
        this.Dis1 = false
      }
      if (this.type == '盘点' || this.type == '盘差') {
        console.log(e)
        this._getRightData()
      }
      if (this.type == '核存') {
        this.cList = e.nuclearDepositList
      }
    },
    //盘存
    Save() {
      console.log(this.timeDate)
      // console.log(this.aList[0].nuclearDepositList)
      // var checkMap = {}
      // this.aList[0].nuclearDepositList.forEach(e=>{
      //   checkMap[e.kindsNumber] = Math.abs(e.differNumber)
      // })
      // var vipWarehouseCheck = {
      //   checkTime:this.myDate,
      //   type:1,
      //   customerNo:JSON.parse(JSON.stringify(this.customerNo.split(',',1)).replace(/\[|]/g,'')),
      //   receiptsNumber:this.receiptsNumber,
      // }
      let obj = {
        // checkMap,
        // vipWarehouseCheck,
        // showCodeList:[],
        customerNo: this.customerNo,
        receiptsNumber: this.receiptsNumber,
        kindsNumber: this.kindsNumber,
        brandName: this.brandName,
        // type:this.type,
        startTime:
          this.timeDate == '' || this.timeDate == null
            ? null
            : this.timeDate[0],
        endTime:
          this.timeDate == '' || this.timeDate == null
            ? null
            : this.timeDate[1],
        'pageData.page': 1,
        'pageData.limit': 500
      }
      console.log(obj)
      saveData(obj).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) {
          this.$message.success('盘存成功')
        } else {
          this.$message.error('盘存失败')
        }
      })
    }
  },

  watch: {
    kindsNumber(a, b) {
      if (a != undefined) {
        this.kindsNumber = a.toUpperCase().trim()
      }
    },
    dataLen(a, b) {
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    limit(a, b) {
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    dataLen1(a, b) {
      this.pagesNum1 = Math.ceil(this.dataLen1 / this.limit1)
    },
    limit1(a, b) {
      this.pagesNum1 = Math.ceil(this.dataLen1 / this.limit1)
    }
  }
}
</script>
